<template>
  <div class="subject">
    <div v-for="item in list" :key="item.id"  class="main">
        <span>{{ item.num1 }}</span>+<span>{{ item.num2 }}</span>=
        <input type="text" style=" width: 100px; height: 20px; " @change="change($event,item.id)" :value="item.result">
        <button @click="submit(item.id)">提交</button>
   </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    change(e, id) {
      console.log(e);
      this.$emit('change',e.target.value,id);
    },
    submit(id) {
      this.$emit('submit',id)
     }
  },
};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>
